﻿@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
}

<style>
    .kanban .todo-column { background-color:#D4D952;}
    .kanban .column-header {font-family:'Comic Sans MS'; text-align:center;
                            border: 8px solid #213;
                                border-radius: 1em;
                                margin: .3em 1em;
                                background-color: aliceblue;

    }
    .kanban .uk-panel-title {
        margin-top:15px;
    }
    .draggable {
        border-radius: 1em;
        margin: 1em;
    }
    .ui-state-active {
        background-color:#990000;
    }
</style>

<div class="uk-grid kanban">
    <div class="uk-width-medium-1-3 todo-column droppable">
        <h1 class="column-header">To Do</h1>

        <div class="uk-panel uk-panel-box draggable">
            <div class="uk-panel ">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Hot</div>
                <h3 class="uk-panel-title">TitleZ</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>

        <div class="uk-panel uk-panel-box draggable">
            <div class="">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Urgent</div>
                <h3 class="uk-panel-title">My very very important task that i have to do or else i won't be a happy camper.</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>

    </div>

    <div class="uk-width-medium-1-3 doing-column droppable">
        <h1 class="column-header">Doing</h1>

        <div class="uk-panel uk-panel-box draggable">
            <div class="uk-panel uk-panel-box uk-width-medium-1-1">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Hot</div>
                <h3 class="uk-panel-title">TitleX</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>

    <div class="uk-width-medium-1-3 done-column droppable">
        <h1 class="column-header">Done</h1>

        <div class="uk-panel uk-panel-box">
            
            <div class="uk-panel uk-panel-box uk-width-medium-1-1 draggable">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Hot</div>
                <h3 class="uk-panel-title">Title1</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
            <div class="uk-panel uk-panel-box uk-width-medium-1-1 draggable">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Hot</div>
                <h3 class="uk-panel-title">Title2</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
            <div class="uk-panel uk-panel-box uk-width-medium-1-1 draggable">
                <div class="uk-panel-badge uk-badge uk-badge-danger">Hot</div>
                <h3 class="uk-panel-title">Title3</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>
</div>

@section Scripts
{
<script type="text/javascript">
    $(function () {
        $(".draggable").draggable();
        $(".droppable").droppable({
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                debugger;
                $(this).append(ui.draggable.clone().removeAttr("style").draggable());
                ui.draggable.remove();

                $(this)
                  .addClass("ui-state-highlight")
                  .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>
}